<template>
  <div :ref="CardName" style="width: 700px; height: 400px;"></div>
</template>

<script>
import Echarts from 'echarts'

export default {
  props: {
    CardName: {
      type: String,
      default: ''
    }
  },
  mounted() {
    this.renderChart()
  },
  methods: {
    renderChart() {
      const myChart = Echarts.init(this.$refs[this.CardName])
      // 这个最核心的语句，一般不会在这里调用，因为需要动态修改数据
      // myChart.setOption(this.options.option)
      this.$emit('updatePage', myChart)
    }
  }
}
</script>

<style lang="scss" scoped></style>
